.statusBar {
  font-size: 1rem;
  padding-bottom: 2em;
  border-bottom: var(--border);

  &.loading {
    .statusBarItem {
      .countBg {
        animation: skeleton-loading 1s ease infinite;
        background-image: linear-gradient(
          60deg,
          #edf2f9 25%,
          rgba(255, 255, 255, 0.24) 37%,
          #edf2f9 63%
        );

        &.normalCount {
          background-image: linear-gradient(
            60deg,
            var(--normal-color) 25%,
            rgba(255, 255, 255, 0.24) 37%,
            var(--normal-color) 63%
          );
        }

        &.warningCount {
          background-image: linear-gradient(
            60deg,
            var(--warning-color) 25%,
            rgba(255, 255, 255, 0.24) 37%,
            var(--warning-color) 63%
          );
          color: #fff;
        }

        &.abnormalCount {
          background-image: linear-gradient(
            60deg,
            var(--abnormal-color) 25%,
            rgba(255, 255, 255, 0.24) 37%,
            var(--abnormal-color) 63%
          );
          color: #fff;
        }

        &.downtimeCount {
          background-image: linear-gradient(
            60deg,
            var(--downtime-color) 25%,
            rgba(255, 255, 255, 0.24) 37%,
            var(--downtime-color) 63%
          );
          color: #fff;
        }

        &.offlineCount {
          background-image: linear-gradient(
            60deg,
            var(--offline-color) 25%,
            rgba(255, 255, 255, 0.24) 37%,
            var(--offline-color) 63%
          );
          color: #fff;
        }

        &.onlineCount {
          background-image: linear-gradient(
            60deg,
            var(--online-color) 25%,
            rgba(255, 255, 255, 0.24) 37%,
            var(--online-color) 63%
          );
          color: #fff;
        }
      }
    }
  }
}

.statusBarItem {
  user-select: none;
  position: relative;
  cursor: pointer;
  .countBg {
    padding: 0 4px;
    text-align: center;
    margin-top: 3px;
    min-width: 44px;
    height: 20px;
    border-radius: 10px;
    background-color: #edf2f9;
    color: #283e59;
    background-size: 200% 100%;

    &.normalCount {
      background-color: var(--normal-color);
      color: #fff;
    }

    &.warningCount {
      background-color: var(--warning-color);
      color: #fff;
    }

    &.abnormalCount {
      background-color: var(--abnormal-color);
      color: #fff;
    }

    &.downtimeCount {
      background-color: var(--downtime-color);
      color: #fff;
    }

    &.offlineCount {
      background-color: var(--offline-color);
      color: #fff;
    }

    &.onlineCount {
      background-color: var(--online-color);
      color: #fff;
    }
  }

  .title {
    text-align: center;
    font-size: var(--sm-size);
  }

  &.active {
    .title {
      color: var(--primary-text-color);
    }

    &:after {
      display: block;
      right: 0;
      left: 0;
      bottom: -2em;
      position: relative;
      width: 100%;
      height: 1px;
      content: '';
      background-color: var(--primary-color);
    }
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
